<%--
  Created by IntelliJ IDEA.
  User: 12845
  Date: 2020/4/15
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<!-- http://localhost:8080/atcrowdfunding02-admin-webui/test/ssm.html -->
<base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">

    $(function () {
        $("#asynBtn").click(function () {
            console.log("ajax函数之前");
            $.ajax({
                "url":"test/ajax/async.html",
                "type":"post",
                "dataType":"text",
                "asyn": false, // 关闭异步工作模式，使用同步方式工作。此时：所有操作在同一个线程内按顺序完成
                "success":function(response) {
                    // success是接收到服务器端响应后执行
                    console.log("ajax函数内部success函数"+response);
                }
            });
            //在$.ajax()执行完成后执行，不等待success()函数
            setTimeout(function () {
                console.log("ajax函数之后");
            },4000);
            //console.log("ajax函数之后");
        });

        $("#btn1").click(function(){
            $.ajax({
                "url": "send/array/one.html",			// 请求目标资源的地址
                "type": "post",						// 请求方式
                "data": {							// 要发送的请求参数
                    "array": [5,8,12]
                },
                "dataType": "text",					// 如何对待服务器端返回的数据
                "success": function(response) {		// 服务器端成功处理请求后调用的回调函数，response是响应体数据
                    alert(response);
                },
                "error":function(response) {		// 服务器端处理请求失败后调用的回调函数，response是响应体数据
                    alert(response);
                }
            });
        });

        $("#btn2").click(function(){
            $.ajax({
                "url": "send/array/two.html",			// 请求目标资源的地址
                "type": "post",						// 请求方式
                "data": {							// 要发送的请求参数
                    "array[0]": 5,
                    "array[1]": 8,
                    "array[2]": 12,
                },
                "dataType": "text",					// 如何对待服务器端返回的数据
                "success": function(response) {		// 服务器端成功处理请求后调用的回调函数，response是响应体数据
                    alert(response);
                },
                "error":function(response) {		// 服务器端处理请求失败后调用的回调函数，response是响应体数据
                    alert(response);
                }
            });
        });

        $("#btn3").click(function(){
            // 准备好要发送到服务器端的数组
            var array = [5, 8, 12];
            // 将JSON数组转换为JSON字符串
            var requestBody = JSON.stringify(array);
            // "['5','8','12']"
            $.ajax({
                "url": "send/array/three.html",			// 请求目标资源的地址
                "type": "post",						// 请求方式
                "contentType": "application/json;charset=UTF-8", // 设置请求体的内容类型，告诉服务器端本次请求的请求体是JSON数据
                "data": requestBody,                // 请求体
                "dataType": "text",					// 如何对待服务器端返回的数据
                "success": function(response) {		// 服务器端成功处理请求后调用的回调函数，response是响应体数据
                    alert(response);
                },
                "error":function(response) {		// 服务器端处理请求失败后调用的回调函数，response是响应体数据
                    alert(response);
                }
            });
        });


        $("#btn4").click(function(){
            // 准备要发送的数据
            var student = {
                "stuId": 5,
                "stuName":"tom",
                "address": {
                    "province": "广东",
                    "city": "深圳",
                    "street":"后瑞"
                },
                "subjectList": [
                    {
                        "subjectName": "JavaSE",
                        "subjectScore": 100
                    },{
                        "subjectName": "SSM",
                        "subjectScore": 99
                    }
                ],
                "map": {
                    "k1":"v1",
                    "k2":"v2"
                }
            };
            // 将JSON数组转换为JSON字符串
            var requestBody = JSON.stringify(student);
            $.ajax({
                "url": "send/compose/object.json",			// 请求目标资源的地址
                "type": "post",						// 请求方式
                "contentType": "application/json;charset=UTF-8", // 设置请求体的内容类型，告诉服务器端本次请求的请求体是JSON数据
                "data": requestBody,                // 请求体
                "dataType": "json",					// 如何对待服务器端返回的数据
                "success": function(response) {		// 服务器端成功处理请求后调用的回调函数，response是响应体数据
                    console.log(response);
                },
                "error":function(response) {		// 服务器端处理请求失败后调用的回调函数，response是响应体数据
                    console.log(response);
                }
            });
        });

        $("#btn5").click(function(){
            //alert("弹框");
            layer.msg("layer弹框");
        });
    })
</script>
<body>
    <a href="admin/to/login/page.html">后台登录页面</a>
    <br/>
    <br/>

<%--    <a href="${pageContext.request.contextPath}/test/ssm.html">测试SSM整合环境</a>--%>
    <a href="test/ssm.html">测试SSM整合环境</a>
    <br/>
    <br/>

    <button id="btn1">Send [5,8,12] One</button>

    <br/>
    <br/>

    <button id="btn2">Send [5,8,12] Two</button>

    <br/>
    <br/>

    <button id="btn3">Send [5,8,12] Three</button>


    <br/>
    <br/>

    <button id="btn4">Send Compose Object</button>

    <br/>
    <br/>
    <button id="btn5">点我弹框</button>

    <br/>
    <br/>
    <button id="asynBtn">发送Ajax请求</button>

</body>
</html>
